<template>
  <div class="pages salesVolumes">
    <!-- 头部 -->
    <div class="pageLevel">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label="" label-width="15px">
            <el-input class="input" v-model="selectdata.keyword" size="small" placeholder="请输入用户手机号码搜索"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" size="mini" @click="searchSelect" class="Button">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="code" label="编号" align="center">
          </el-table-column>
          <el-table-column prop="name" label="卡名" align="center">
          </el-table-column>
          <el-table-column prop="storeName" align="center" label="使用服务">
            <template slot-scope="scope">
              <div v-for="good in scope.row.service">{{good.serviceName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="phone" align="center" label="购买用户">
          </el-table-column>
          <el-table-column prop="createTime" align="center" label="购买时间">
          </el-table-column>
          <el-table-column prop="times" align="center" label="总次数">
          </el-table-column>
          <el-table-column prop="remainingTimes" align="center" label="剩余次数">
          </el-table-column>
          <el-table-column prop="name" align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" @click="dialogVisible = true,records(scope.row.id)" type="text" class="addDetail">使用记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
      <!-- 使用记录 -->
      <el-dialog title="使用记录" class="addshopname" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" width="55%">
        <i class="el-icon-close icon" @click="dialogVisible = false"></i>

        <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column fixed prop="orderCode" label="单号" width="300"> </el-table-column>
          <el-table-column prop="usedNum" label="次数" width="120"></el-table-column>
          <el-table-column prop="createTime" label="时间" :formatter="timestamps" show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- <div class="pageblock ftteer">
        <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
        </el-pagination>
      </div> -->
        <div class="foot">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { saleStatistical, getCardRecords } from "@/api";
import util from "@/util";
export default {
  computed: mapState(["merchantId", "pageLevel"]),
  data() {
    return {
      // 搜索框
      selectdata: {
        select: "",
        status: "",
        keyword: ""
      },
      searchData: {
        keyword: ""
      },
      options: [
        {
          name: "0",
          value: "1323"
        }
      ],
      // 表格
      tableData3: [],
      tableData: [],
      // 分页开始
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      dialogVisible: false
    };
  },
  mounted() {
    this.list(this.pageSize, 1);
  },
  methods: {
    // 转时间戳
    timestamps: function(row, column) {
      return util.foryear(parseInt(row.createTime));
    },
    records(id) {
      let data = {
        cardId: id,
        companyId: this.merchantId
      };
      getCardRecords(data).then(res => {
        //  请求成功后的函数-
        this.tableData3 = res.data;
      });
    },
    list(pageSize, pageNum) {
      let data = {
        phone: this.searchData.keyword,
        pageNum: pageNum,
        pageSize: pageSize,
        id: util.getQuery('cardId'),
        companyId: this.merchantId
      };
      saleStatistical(data).then(res => {
        //  请求成功后的函数-
        this.tableData = res.data.list;
        this.totalItems = parseInt(res.data.totalRecord);
      });
    },
    searchSelect() {
      this.searchData = this.selectdata;
      this.list(this.pageSize, 1);
    },
    //跳页
    toPage() {
      this.list(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.list(this.pageSize, 1);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.list(this.pageSize, this.currentPage);
    },
    add() {
      this.$router.push("addcika");
    }
  }
};
</script>
<style>
.ftteer .el-input {
  width: 45px;
}
</style>
